<template>
  <div class="app-container">
    <SearchForm v-show="showSearch" v-model="queryParams" :options="options.formOps" @onQuery="getList">
    </SearchForm>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          v-hasPermi="['hingeInstallation:add']">新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <ImportExcel
          type="primary"
          :url="APIS.url"
          plain
          icon="Plus"
          @success="getList"
        ></ImportExcel>
      </el-col>
      <el-col :span="1.5">
        <ExportExcel type="primary" :url="APIS.url" plain></ExportExcel>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport"
          >导出</el-button
        >
      </el-col> -->

      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <Table ref="table" :auto-featch="true" :fetch-data="fetchData" :options="options.table" actionWidth="190">
      <template #actionButton="{ row }">
        <el-button type="text" icon="Edit" @click="handleEdit(row)" v-hasPermi="['hingeInstallation:edit']">修改</el-button>

        <el-button type="text" icon="Delete" style="color: red" @click="handleDel(row)"
          v-hasPermi="['hingeInstallation:delete']">删除</el-button>
      </template>
    </Table>
    <DialogVform :formJson="formJson" ref="dialogVform" @onSubmit="onSubmit"
      :slots="['classPerson', 'departmentPerson', 'senior']">
      <template v-for="item in slots" #[item.key]>
        <el-form-item :label="item.name" :prop="item.key" label-position="right">
          <el-input v-model="form[item.key]" readonly @click="onInnerOpen(item.key)">
          </el-input>
        </el-form-item>
      </template>
      <TableSelect ref="userTableSelect" :queryApi="listUser" :options="[]" :rowKey="'userId'" rowLabel="nickName"
        @onConfirm="onUserConfirm" rowLabelText="用户昵称">
        <template #formSlot="{ handleQuery, filterForm }">
          <el-col :span="8">
            <el-form-item label="部门名称">
              <el-input size="small" @change="handleQuery" v-model="filterForm.deptName" clearable style="width: 100%"
                @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户名称">
              <el-input size="small" @change="handleQuery" v-model="filterForm.userName" clearable style="width: 100%"
                @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
        </template>
        <template #tableSlot>
          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" />
          <el-table-column label="用户名称" align="center" key="userName" prop="userName" />
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" />
        </template>
      </TableSelect>
    </DialogVform>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import { apis as APIS } from "@/api/aqsc/tzss/gjzz.js";
import formJson from "./components/options.json";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
import { listUser } from "@/api/system/user";
import TableSelect from "@/components/tableSelect/index";

const { proxy } = getCurrentInstance();

const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    [
      "name",
      "department",
      "properties",
      "securityFacilitiesName",
      "person",
    ].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const userType = ref("");
const slots = ref([
  {
    name: "班组责任人",
    key: "classPerson",
  },
  {
    name: "部门负责人",
    key: "departmentPerson",
  },
  {
    name: "高管",
    key: "senior",
  },
]);
const plugAdd = () => { };
const plugEdit = (row) => {
  form.value.classPerson = row.classPerson;
  form.value.departmentPerson = row.departmentPerson;
  form.value.senior = row.senior;
  form.value.classPersonId = row.classPersonId;
  form.value.departmentPersonId = row.departmentPersonId;
  form.value.seniorId = row.seniorId;
};
const {
  onSubmit,
  fetchData,
  handleAdd,
  handleEdit,
  getList,
  handleDel,
  queryParams,
  form,
} = useAsyncData({
  APIS,
  formJson,
  dialogVform,
  table,
  proxy,
  plugAdd,
  plugEdit,
});
// 选择弹窗列表
const userTableSelect = ref();
const onInnerOpen = (type) => {
  userType.value = type;
  let values =
    (form.value[type + "Id"] && form.value[type + "Id"].split(",")) || [];
  let names = (form.value[type] && form.value[type].split(",")) || [];
  userTableSelect.value.open(
    values.map((item, index) => ({
      value: values[index],
      label: names[index],
    }))
  );
};
const onUserConfirm = (data) => {
  const values = data.map((item) => item.value);
  const names = data.map((item) => item.label);
  form.value[userType.value] = names.join(",");
  form.value[userType.value + "Id"] = values.join(",");
};
</script>

<style lang="scss" scoped></style>
